window.onload = function () {
    function attribute(w, v, i) {
        return w.getAttribute(v) || i
    }

    function getElement(i) {
        return document.getElementsByTagName(i)
    }

    /*设置默认的一些属性，返回一个属性对象*/
    function option() {
        debugger;
        var s = getElement("script"), length = s.length, script = s[length - 1], r, g, b;
        r = Math.round(Math.random() * 255), g = Math.round(Math.random() * 255), b = Math.round(Math.random() * 255);
        return {
            length: length,
            z_index: attribute(script, "zIndex", -1),
            opacity: attribute(script, "opacity", 0.5),
            color: attribute(script, "color", r + ',' + g + ',' + b),
            count: attribute(script, "count", 10)/*初始页面像素点*/
        }
    }

    function getCanvasSize() {
        screen_width = canvas.width = window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth,
            screen_height = canvas.height = window.innerHeight ||
                document.documentElement.clientHeight ||
                document.body.clientHeight
    }

    /*canvas绘制关键方法*/
    function draw() {
        context.clearRect(0, 0, screen_width, screen_height);
        /*在给定的矩形内清除指定的像素*/
        var w = [mouse].concat(t);
        /*连接两个或多个数组。 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本*/
        var x, v, A, B, z, y;
        t.forEach(function (i) {
            i.x += i.xa,
                i.y += i.ya,
                i.xa *= i.x > screen_width || i.x < 0 ? -1 : 1,
                i.ya *= i.y > screen_height || i.y < 0 ? -1 : 1,
                context.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
            /*画矩形*/
            for (v = 0; v < w.length; v++) {
                x = w[v];
                if (i !== x && null !== x.x && null !== x.y) {
                    B = i.x - x.x,
                        z = i.y - x.y,
                        y = B * B + z * z;
                    y < x.max && (
                        x === mouse && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z),
                            A = (x.max - y) / x.max,

                            context.beginPath(), /*绘制直线*/
                            context.lineWidth = A / 2,
                            context.strokeStyle = "rgba(" + option.color + "," + (A + 0.2) + ")",
                            context.moveTo(i.x, i.y),
                            context.lineTo(x.x, x.y),
                            context.stroke()
                    )
                }
            }
            w.splice(w.indexOf(i), 1)
            /*向/从数组中添加/删除项目,然后返回被删除的项目*/
        }),
            requestAnimationFrame(draw())
        /*不停的绘制*/
    }

    var canvas = document.createElement("canvas"),
        option = option(),
        canvas_id = "c_n" + option.length,
        context = canvas.getContext("2d"),
        screen_width,
        screen_height,
        requestAnimationFrame = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (i) {
                window.setTimeout(i, 1000 / 45)
            },
        mouse = {
            x: null,
            y: null,
            max: 20000
        };
    canvas.id = canvas_id;
    canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + option.z_index + ";opacity:" + option.opacity;
    document.body.appendChild(canvas);
    getCanvasSize(),
        window.onresize = getCanvasSize;
    window.onmousemove = function (e) {
        e = e || window.event,
            mouse.x = e.clientX,
            mouse.y = e.clientY
    },
        window.onmouseout = function () {
            mouse.x = null,
                mouse.y = null
        };

    for (var t = [], p = 0; option.count > p; p++) {
        var h = Math.random() * screen_width,
            g = Math.random() * screen_height,
            q = 2 * Math.random() - 1,
            d = 2 * Math.random() - 1;
        t.push({
            x: h,
            y: g,
            xa: q,
            ya: d,
            max: 6000
        })
    }
    /*间隔绘制直线和点*/
    setTimeout(function () {
        draw()
    }, 100)
}